<template>
    <div>
        <div class="time-complete">
            <p class="tips">请填写订单时间：</p>
            <div class="period-row">
                <div class="detail">
                    <span class="periods">周期：每</span><a-input-number :min="1" :precision=0 v-model="time.cycle" style="width: 130px;" @change="cycleChange"/>
                    <span class="datetime">
                        <a-select style="width: 130px" v-model="time.cycle_unit">
                            <a-select-option value="天">天</a-select-option>
                            <a-select-option value="周">周</a-select-option>
                            <a-select-option value="月">月</a-select-option>
                        </a-select><span class="one-time">一次</span>
                    </span>
                </div>
                <div>
                    <span>
                        周末：
                        <a-select style="width: 130px" v-model="time.week" :disabled="time.cycle_unit != '天'">
                            <a-select-option value="1">包括</a-select-option>
                            <a-select-option value="0">不包括</a-select-option>
                        </a-select>
                    </span>
                </div>
            </div>
            <div class="collect"><p class="collect-time">采集时间：每周期</p>
                <hour-range @change="handleHourChange" :collectTime="time.cycle_hour"></hour-range>
            </div>
            <div class="deliver">
                <div class="deliver-a">
                    <p>数据交付时间：</p>
                    <div>
                        <a-select style="width:130px" v-model="time.hand_type">
                            <a-select-option value="2">周期结束前</a-select-option>
                            <a-select-option value="3">周期结束后</a-select-option>
                        </a-select>
                        <p>{{form.deliver}}</p>
                    </div>
                </div>
                <div>第:<a-input-number :min="1"  :precision=0 v-model="time.time_count"
                    style="width:160px; margin-left: 10px; margin-right: 10px" @change="timeCountChange"/>天
                </div>
            </div>
            <div class="urgent">
                订单是否优先加急：
                <a-radio-group v-model="time.is_urgent">
                    <a-radio value="1">紧急</a-radio>
                    <a-radio value="0">不紧急</a-radio>
                </a-radio-group>
            </div>
            <div class="constant">订单持续时间：
                <day-range @change="handleDayChange" :constantTime="time.cycle_day"></day-range>
            </div>
        </div>
        <div class="ant-modal-footer">
            <div>
                <a-button key="back" type="primary" @click="defaultTime">还原默认</a-button>
                <a-button key="submit" type="primary" @click="saveTime">保存</a-button>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import HourRange from "@/components/hourRange";
    import DayRange from "@/components/dayRange";
    function getTime(param) {
        return new Date(param.replace(/[年,月]/g, '-').replace(/日/g, '')).getTime()
    }
    export default {
        name: 'period',
        props: ['form'],
        components: { HourRange, DayRange},
        data() {
            return {
                time: {
                    cycle: 1,
                    cycle_unit: '天',
                    week: '1',
                    cycle_hour: '00:00:00-23:59:59',
                    cycle_day: '',
                    hand_type: '1',
                    time_count: '1',
                    is_urgent: '0',
                },
                cycleDate: {
                    cycle: '1',
                    cycle_day: '2019年5月14日-2019年5月14日',
                    is_week: true
                },
                innerMonths: [],
                year: moment().get('year'),
                month: moment().get('month') + 1,
                day: moment().get('date'),
                hour_range: '',
            }
        },
        mounted() {
            this.time.cycle_day = this.form.cycle_day;
            this.time.hand_type = this.form.hand_type === '周期结束前' ? '2' : '3';
            this.time.time_count = this.form.hand_day;
            this.time.cycle = this.form.cycle;
            this.time.cycle_hour = this.form.cycle_hour;
            this.time.cycle_unit = this.form.cycle_unit;
            this.time.week = this.form.week === '是' ? '1' : '0';
            this.time.is_urgent = this.form.is_urgent === '紧急' ? '1' : '0';
            //this.periodsPart()
        },
        methods: {
            handleHourChange(data) {
                this.time.cycle_hour = data
            },
            handleDayChange(data) {
                var date = []
                let timeArr = data.split('~');
                date[0] = moment(timeArr[0]).format('YYYY年M月D日')
                date[1] = moment(timeArr[1]).format('YYYY年M月D日')
                this.time.cycle_day = `${date[0]} - ${date[1]}`
            },
            defaultTime() {
                this.time.cycle = this.form.cycle;
                this.time.cycle_unit = this.form.cycle_unit;
                this.time.week = this.form.week === '是' ? '1' : '0';
                this.time.cycle_hour = this.form.cycle_hour;
                this.time.time_count = this.form.hand_day;
                this.time.cycle_day = this.form.cycle_day;
                this.time.hand_type = this.form.hand_type === '周期结束前' ? '2' : '3';;
            },
            saveTime() {
                let timeArr = this.time.cycle_day.split('-');
                let start_time = getTime(timeArr[0] + ' 00:00:00');
                let end_time = getTime(moment(timeArr[1], 'YYYY年M月D日').add(1, 'days').format('YYYY年M月D日') + ' 00:00:00');
                this.cycleDate.is_week = this.time.week == '1' ? true : false;

                let periodCount = 1;
                switch (this.time.cycle_unit) {
                    case '天':
                        periodCount = this.time.cycle;
                        break;
                    case '周':
                        periodCount = this.time.cycle * 7;
                        break;
                    case '月':
                        periodCount = this.time.cycle * 30;
                        break;
                    default:
                        break
                }

                let temp = [];
                let time  = timeArr[0];
                while (moment(time, 'YYYY年MM月DD日').valueOf() <= moment(timeArr[1], 'YYYY年MM月DD日').valueOf()) {
                    if (moment(time, 'YYYY年MM月DD日').get('day') == 0 || moment(time, 'YYYY年MM月DD日').get('day') == 6) {
                        if (!this.cycleDate.is_week) {
                            time = moment(time, 'YYYY年MM月DD日').add(1, 'days').format('YYYY年MM月DD日');
                            continue
                        } else {
                            temp.push(time)
                        }
                    } else {
                        temp.push(time)
                    }
                    time = moment(time, 'YYYY年MM月DD日').add(1, 'days').format('YYYY年MM月DD日');
                }

                let period = parseInt((end_time - start_time) / (3600 * 24 * 1000) / periodCount);
                if (temp.length < periodCount) {
                    this.$message.warning('请选择持续时间大于或等于周期时间', 1);return false
                }
                this.form.cycle = this.time.cycle;
                this.form.cycle_unit = this.time.cycle_unit;
                this.form.week = this.time.week;
                this.form.cycle_hour = this.time.cycle_hour;
                this.form.cycle_day = this.time.cycle_day;
                this.form.hand_type = this.time.hand_type;
                this.form.time_count = this.time.time_count;

                this.cycleDate.cycle = periodCount;
                this.cycleDate.cycle_day = this.time.cycle_day;

                this.form.period = period
                this.form.is_urgent = this.time.is_urgent
                this.$emit("getPeriod", this.form)
                this.showcycle = false
            },
            cycleChange() {
                if (!this.time.cycle) {
                    this.time.cycle = 1
                }
            },
            timeCountChange() {
                if (!this.time.hand_day) {
                    this.time.hand_day = 1
                }
            },
            
        },
        
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../assets/scss/mixin";
    .time-complete {
        .tips {
            font-weight: 600;
            margin-bottom: 20px;
            width: 600px;
        }
        .period-row {
            @include fj();
            margin-bottom: 20px;
            .detail {
                .periods {
                    margin-right: 10px;
                }
                .datetime {
                    margin-left: 30px;
                    .one-time {
                        margin-left: 10px;
                    }
                }
            }
        }
        .collect {
            @include fj(flex-start);
            align-items: center;
            margin-bottom: 20px;
            .collect-time {
                margin-right: 10px;
            }
        }
        .deliver {
            margin-bottom: 5px;
            @include fj();
            .deliver-a {
                @include fj();
                align-items: baseline;
                & > div > p{
                    margin-top: 5px;
                    color: #FF3F3F;
                    font-size: 12px;
                }
            }
        }
        .constant {
            @include fj(flex-start);
            align-items: center;
            margin-bottom: 20px;
        }
        .urgent {
            margin-bottom: 20px;
        }
    }
</style>

